<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue">
			<block slot="content">{{name}}-搜索</block>
		</cu-custom>
		<view>
			<!-- 搜索条 -->
			<view class="searchTopBox">
				<view class="searchBoxRadius">
					<view class="grace-search-icon searchBoxIcon cuIcon-search"></view>
					<input class="searchBoxIpt" type="search" v-model="ipt" @blur="inputs" @confirm="searchNow($event)" placeholder="请输入关键字..."></input>
				</view>
			</view>
			<!-- 搜索历史 -->
			<view class="searchBotBox" v-if="searchKey.length && searchClose">
				<view class="ov">
					<view class="fl">搜索历史</view>
					<view @tap="clearKey" class="fr grace-more-r grace-search-remove cuIcon-delete"></view>
				</view>
				<view class="searchHistoryBox">
					<view class="searchHistoryBoxItem" v-for="(item,index) in searchKey" :key='index' @click="searchNow(item)">
						{{item}}
					</view>
				</view>
			</view>
			<!-- 列表 -->
			<view class="cu-card case no-card">
				<view class="cu-item shadow" v-for="(item,index) in list" :key="item.id" @click="go_item(item.id)" :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]">
					<view class="image">
						<image :src="item.book_img" mode="widthFix"></image>
						<view class="cu-tag bg-blue">{{item.tag}}</view>
						<view class="cu-bar bg-shadeBottom"> <text class="text-cut">{{item.title}}</text></view>
					</view>
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="cu-avatar round lg" :style="[{backgroundImage:'url('+href+'/image/icon.png)'}]"></view>
							<view class="content flex-sub">
								<view class="text-grey">{{name}}</view>
								<view class="text-gray text-sm flex justify-between">
									{{item.timer}}
									<view class="text-gray text-sm">
										<text class="cuIcon-attentionfill margin-lr-xs"></text> {{item.look_num}}
										<!-- <text class="cuIcon-appreciatefill margin-lr-xs"></text> 99+
										<text class="cuIcon-messagefill margin-lr-xs"></text> (()) -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKey: [],
				ipt: '',
				searchClose: true,
				list: [],
				name:"",
				href:""
			}
		},
		created() {
			var vv = uni.getStorageSync('searchLocal');
			if (vv) {
				var arr = vv.split("-");
				this.searchKey = [...new Set(arr)];
			};
		},
		methods: {
			inputs() {
				if (this.ipt === '') {
					this.list = [];
					this.searchClose = true;
				};
			},
			clearKey: function() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '点击确定将删除所有历史信息，确定删除吗？',
					success: function(res) {
						if (res.confirm) {
							that.searchKey = [];
							uni.setStorage({
								key: 'searchLocal',
								data: that.searchKey
							});

						} else if (res.cancel) {

						}
					}
				});

			},
			searchNow: function(e) {
				console.log(e)
				if (this.ipt == '' && !e) {
					uni.showToast({
						title: '未输入搜索关键字',
						icon: 'none',
						duration: 1000
					});
					return false;
				};
				var key = typeof(e) === "string" ? e : this.ipt;

				this.ajax(key);
				this.ipt = key;

			},
			ajax(key) {
				var _this = this;
				var newArr = this.searchKey;
				uni.showLoading({
					title: '加载中...'
				});
				uni.request({
					url: this.$api + 'index.php',
					method: "POST",
					data: JSON.stringify({
						id: 106,
						key: key
					}),
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						console.log(res.data);
						uni.hideLoading();
						if (res.data.code == '200') {
							newArr.push(_this.ipt);
							_this.searchKey = newArr;
							_this.searchKey = [...new Set(_this.searchKey)];
							_this.list = _this.set_img(res.data.data);
							_this.searchClose = false;
							var newStr = newArr.join('-');
							uni.setStorage({
								key: 'searchLocal',
								data: newStr
							});
						} else {
							uni.showLoading({
								title: '请更换关键字'
							});
							setTimeout(function() {
								uni.hideLoading();
							}, 500);
						};
					}
				});
			},
			set_img(d) {
				var len = d.length;
				for (var i = 0; i < len; i++) {
					d[i].book_img = d[i].book_img.includes("../../../") ? this.href + "/" + d[i].book_img.split(
						"../../../")[1] : this.href + "/assets/image/null.jpg"
				};
				return d;
			},
			go_item(d) {
				uni.navigateTo({
					url: '/pages/item/item?id=' + d
				});
			}
		},
		onShareAppMessage(res) {
			return {
				title: this.name,
				path: '/' + this.$mp.page.route
			}
		},
		onLoad() {
			this.name = this.$name;
			this.href = this.$href;
		}
	}
</script>

<style>
	page {
		background: #FFF;
	}

	.ov {
		overflow: hidden;
	}

	.fl {
		float: left;
	}

	.fr {
		float: right;
	}

	.searchTopBox {
		width: 100%;
		background-image: linear-gradient(100deg, #0081ff, #1cbbb4);
		height: 100upx;
		box-sizing: border-box;
		padding-top: 15upx;
	}

	.searchBoxRadius {
		width: 90%;
		height: 70upx;
		background-color: #fff;
		margin-left: 5%;
		overflow: hidden;
		border-radius: 35upx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.searchBoxIcon {
		font-size: 40upx;
		margin-left: 20upx;
		float: left;
	}

	.searchBoxIpt {
		height: 70upx;
		line-height: 70upx;
		margin-left: 20upx;
		float: left;
		font-size: 32upx;
	}

	.searchBotBox {
		width: 100%;
		margin-top: 30upx;
		padding: 15upx 3%;
		box-sizing: border-box;
	}

	.searchHistoryBox {
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
		margin-top: 40upx;
	}

	.searchHistoryBoxItem {
		float: left;
		font-size: 26upx;
		color: #666;
		line-height: 46upx;
		height: 46upx;
		padding: 0 20upx;
		border-radius: 23upx;
		margin-left: 15upx;
		margin-bottom: 20upx;
		border: 1px solid #ccc;
	}
</style>
